<template>
  <div class="timeline-container">
    <el-timeline>
      <el-timeline-item
        v-for="event in sortedEvents"
        :key="event.id"
        :timestamp="event.date"
        color="#007BFF"
        :dot="event.icon"
      >
        <el-card class="event-card">
          <div class="event-header">
            <h3 class="event-title">{{ event.title }}</h3>
            <span class="event-date">{{ event.date }}</span>
          </div>
          <p class="event-description">{{ event.description }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      events: [
        {
          id: 1,
          title: "事件 1",
          description: "这里是事件 1 的描述。",
          date: "2025-03-01",
          icon: "el-icon-check",
        },
        {
          id: 2,
          title: "事件 2",
          description: "这里是事件 2 的描述。",
          date: "2025-02-15",
          icon: "el-icon-edit",
        },
        {
          id: 3,
          title: "事件 3",
          description: "这里是事件 3 的描述。",
          date: "2025-04-05",
          icon: "el-icon-delete",
        },
        // 更多事件
      ],
    };
  },
  computed: {
    sortedEvents() {
      return this.events.sort((a, b) => new Date(a.date) - new Date(b.date));
    },
  },
};
</script>

<style scoped>
.timeline-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.event-card {
  background-color: #f9f9f9;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.event-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.event-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.event-date {
  font-size: 14px;
  color: #666;
}

.event-description {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* Element UI Timeline Item Dot */
.el-timeline-item__dot {
  background-color: #ffb6e9;
  border: 3px solid #ffe9ea;
  width: 12px;
  height: 12px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.el-timeline-item__dot:hover {
  background-color: #ffb4e9;
  border-color: #ffb6e9;
}
</style>
